import { Icon } from '@iconify/vue'
import { ElButton, ElSpace } from 'element-plus'
import { defineComponent } from 'vue'
import { VxeGrid } from 'vxe-table'

import type { IMenuListItem } from '@/apis'
import { StatusTag } from '@/components'

import { MenuDialog } from './components'
import { useGrid } from './hooks'

export default defineComponent({
  setup() {
    const { gridExtHook, ...gridRestHook } = useGrid()

    return {
      gridRef: gridExtHook.gridRef,
      ...gridRestHook
    }
  },
  render() {
    return (
      <div>
        <VxeGrid ref={(e: any) => (this.gridRef = e)} {...this.gridConfig}>
          {{
            toolbar_buttons: () => (
              <ElSpace>
                <ElButton
                  v-permission="'system:menu:add'"
                  type="primary"
                  plain
                  onClick={() => this.handleShowAdd()}
                >
                  新增
                </ElButton>
                <ElButton plain onClick={this.handleToggleExpand}>
                  展开/折叠
                </ElButton>
              </ElSpace>
            ),
            columns_icon: ({ row }: { row: IMenuListItem }) =>
              row.icon ? <Icon icon={row.icon} inline={true} /> : null,
            columns_status: ({ row }: { row: IMenuListItem }) => (
              <StatusTag value={row.status} />
            ),
            columns_operation: ({ row }: { row: IMenuListItem }) => (
              <ElSpace>
                <ElButton
                  v-permission="'system:menu:edit'"
                  type="primary"
                  size="small"
                  link
                  onClick={() => this.handleShowEdit(row)}
                >
                  修改
                </ElButton>
                <ElButton
                  v-permission="'system:menu:add'"
                  type="primary"
                  size="small"
                  link
                  disabled={row.visible === '1'}
                  onClick={() => this.handleShowAdd(row.id)}
                >
                  新增
                </ElButton>
                <ElButton
                  v-permission="'system:menu:remove'"
                  type="danger"
                  size="small"
                  link
                  onClick={() => this.handleDelete(row)}
                >
                  删除
                </ElButton>
              </ElSpace>
            )
          }}
        </VxeGrid>
        {/* 新增/编辑操作 */}
        <MenuDialog
          ref={(e: any) => (this.menuDialogRef = e)}
          statusOptions={this.statusOptions}
          onSuccess={this.handleRefresh}
        />
      </div>
    )
  }
})
